<template>
  <view class="acccount-page">
    <view class="withdrawal-num">
      <view class="num-title">姓名</view>
      <view class="num-int">
        <up-input placeholder="输入您的姓名" border="bottom" type="text" v-model="name" @update:modelValue="onloginShow"></up-input>
      </view>
      <view class="num-title">身份证号</view>
      <view class="num-int">
        <up-input placeholder="输入身份证号" border="bottom" type="text" v-model="codeValue" @update:modelValue="onloginShow">
        </up-input>
      </view>
      <up-button text="提交" color="#A4682F" :disabled="loginShow" @click="onPayment"></up-button>
    </view>
  </view>
</template>

<script setup>
  import {
    bindRealName,
    info
  } from '../api.js'
  import {
    ref
  } from 'vue'
  const loginShow = ref(true)
  const name = ref('')
  const codeValue = ref('')

  function onloginShow(val) {
    loginShow.value = name.value && codeValue.value ? false : true
  }

  const onPayment = (async () => {
    const regex =
      /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/
    if (!regex.test(codeValue.value)) {
      uni.showToast({
        title: '请输入正确的身份证号',
        icon: 'none'
      })
      return
    }
    const res = await bindRealName({
      real_name: name.value,
      idcard: codeValue.value
    })
    if (res && res.code == 1) {
      infoApi()
      uni.showToast({
        title: '认证成功',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack(-1)
      }, 500)
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    }
  })
  const infoApi = (async () => {
    const res = await info()
    if (res && res.code === 1) {
      uni.setStorageSync("user", res.data)
    } else {
      uni.showToast({
        title: res.msg,
        icon: "none"
      })
    }
  })
</script>

<style lang="scss" scoped>
  .acccount-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 40rpx 30rpx;

    .withdrawal-num {
      width: 100%;
      background: rgba(255, 255, 255);
      box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
      border-radius: 20rpx;
      box-sizing: border-box;
      padding: 20rpx 30rpx;

      .num-title {
        font-size: 24rpx;
        font-weight: 500;
        line-height: 34rpx;
        color: #3B3B3B;
      }

      .num-int {
        box-sizing: border-box;
        padding: 20rpx 0;
      }

      ::v-deep .u-button--square {
        border-radius: 12rpx;
      }
    }

  }
</style>